@charset "UTF-8"
header { 
    border-bottom: 2px solid #fff;
    height: 150px;
    background-color: rgb(216, 214, 214);
    padding: 20px -10px 20px 10px;
    margin: -20px 20px 10px 20px;
}
header h1 {
    font-size: 42pt; color: #F2F2F2;		 
    font-family: 'Finger Paint', cursive; 
    color: #fff;
    padding-top: 75px; margin: 30px 20px 10px 10px; 
    text-align: left; 
    text-shadow: 6px 6px 10px rgba(0,0,0,.6);
}
body {
    background-color: rgb(194, 188, 188);
    padding: 20px -10px 20px 10px;
    margin: 20px 20px 10px 20px;
}
h1 {font-size: 36pt; text-align: center;}
h2 {font-size: 24pt;}
p {font-size: 20pt;}
section > ul > li {
    text-align: center;
    border: 2px solid #fff; 
    box-shadow: 4px 4px 8px #000;
    padding: 20px;
    margin: 20px 20px 20px -20px;
    background-image: linear-gradient(to bottom,#ddd,#888,#444);
}
section ul li h2 {
    margin-top: -10px;
}

video{padding: 10px;}
img {margin: 20px;}
img:hover {
    transform: scale(1.2); 
    transition-duration: .8s;
}
footer { border-top: 2px solid #fff; }
footer > p {text-align: center;}
#logo-curso-em-video{
    position: absolute;
    width: 18%; height: 15%;
    top: 5px; left: 50px;
}
iframe{
    padding-top: 25px; padding-bottom: 25px;
    display: block;
    margin: auto;
}
.menu ul li {
    background-color: #aaa; 
    color: #fff;
    float: left;    /* Dispões os ítens horizontalmente */
    width: 180px;
    height: 40px;
    display: inline-block;  /* Tira as bolinhas */
    text-align: center;
    line-height: 40px;  /* centraliza verticalmente "line-height = height = 40px" */ 
    font-size: 25px;
}
.menu ul li:hover {background-color: #4f5153;}
.menu{ 
    display: block; opacity: .8;
}         
.menu ul {
    padding: 0px;    /* tira o avanço e alinha */
    position: absolute; top: -2px; right: 44px; /* posição absoluta no site */
}
.menu ul ul {
    display: none;
    position: relative; left: 0px;
}
.menu ul li:hover > ul{display: block; float: left;}
.menu ul ul ul {margin-left: 200px; top: -40px; */}

a { color: #000; text-decoration: none; padding: 10px;}
a:hover { 
    color: #fff; 
    text-decoration: underline;
    text-shadow: 0px 0px 20px #000;
}
.botao {
    border: 2px solid #000;
    padding: 10px 100px 10px 100px;
    background-color: #dddddd; 
}
div#d1, div#d2, div#d3{    
        margin: 10px 50px;
        background-color: gray;
        text-align: center;
        width: 200px;   height: 200px;
        border: 1px solid black ;
        display: inline-block;
    }
div#d1:hover, div#d2:hover, div#d3:hover { background-color: yellow; }
div#sombra{
    height: 100px; width: 850px;
    background-color: #fff;
    margin: 50px;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.6);
}
#sombra > h2{text-align: center; padding: 30px;}
div#sombra2{
    height: 100px; width: 850px;
    background-color: #fff;
    margin: 50px;
    box-shadow: inset 8px 8px 16px rgba(0,0,0,0.6);
}
#sombra2 > h2{text-align: center; padding: 30px;}